<script setup lang="ts">
  import { ref } from 'vue';
  import sceneComponent from '@/views/DigitalTwin/right/component/sceneComponent.vue';
  import animationComponent from '@/views/DigitalTwin/right/component/animationComponent.vue';
  import dataComponent from '@/views/DigitalTwin/right/component/dataComponent.vue';
  import stateComponent from '@/views/DigitalTwin/right/component/stateComponent.vue';
  import basicComponent from '@/views/DigitalTwin/right/component/basicComponent.vue';
  defineProps<{
    currentComponent: string;
  }>();
  // 解析组件名称并返回相应的组件
  const resolveComponent = (componentName: string) => {
    console.log(componentName);
    switch (componentName) {
      case 'basicComponent':
        return basicComponent;
      case 'sceneComponent':
        return sceneComponent;
      case 'animationComponent':
        return animationComponent;
      case 'dataComponent':
        return dataComponent;
      case 'stateComponent':
        return stateComponent;
      //default: return () => h('div', 'No Content Available');
    }
  };
</script>

<template>
  <main class="content" style="width: 18vw">
    <component :is="resolveComponent(currentComponent)" />
  </main>
</template>

<style scoped>
  .settings-panel {
    background-color: #1e2430;
    color: white;
    height: 95vh;
    overflow: auto;
  }
  .content {
    margin-top: 5vh;
  }
  .right-menu-title {
    font-size: 2vw;
  }
  .right-menu-title :deep(.el-form-item__label) {
    font-weight: 550;
    --color: #fff;
  }

  :deep(.el-form-item__label) {
    font-size: 0.8vw;
    height: 3vh;
  }

  :deep(.el-input) {
    width: 8vw;
  }

  :deep(.el-input__inner) {
    width: 2vw;
    height: 3vh;
    font-size: 0.6vw;
  }

  :deep(.el-color-picker__color-inner) {
    width: 1.5vw;
    height: 1.5vw;
  }

  :deep(.el-color-picker__trigger) {
    width: 1.7vw;
    height: 1.7vw;
    padding: 0;
  }

  :deep(.el-input__wrapper) {
    background-color: #1e2430;
  }

  :deep(.el-input__wrapper .el-input__inner) {
    width: 4vw;
    height: 3vh;
  }

  :deep(.el-input-number .el-input__wrapper) {
    padding-left: 0;
    padding-right: 0;
  }

  :deep(.el-date-editor) {
    --el-date-editor-width: 8vw;
  }

  :deep(.el-checkbox__input) {
    width: 2vw;
    height: 2vw;
    margin-top: 1vw;
  }
  :deep(.el-checkbox__inner):after {
    height: 1vh;
    left: 0.8vh;
  }
  :deep(.el-checkbox__inner) {
    width: 1vw;
    height: 1vw;
  }

  :deep(.el-icon svg) {
    width: 2vw;
    height: 2.5vh;
  }

  :deep(.el-slider) {
    width: 10vw;
  }

  :deep(.el-slider__input) {
    width: 4vw;
  }

  :deep(.el-select__placeholder) {
    font-size: 1.5vh;
  }

  :deep(.el-icon) {
    --color: white;
  }

  :deep(.el-input-number__decrease) {
    width: 1vw;
    background-color: #42516c;
  }

  :deep(.el-input-number__increase) {
    width: 1vw;
    background-color: #42516c;
  }

  :deep(.el-input-number.is-controls-right .el-input-number__decrease) {
    width: 1vw;
    background-color: #42516c;
    height: 1.5vh;
  }

  :deep(.el-input-number.is-controls-right .el-input-number__increase) {
    width: 1vw;
    height: 1.5vh;
    background-color: #42516c;
  }

  :deep(.el-select__wrapper) {
    background-color: #1e2430;
    width: 5vw;
    height: 3vh;
  }

  /* 整个滚动条 */
  ::-webkit-scrollbar {
    width: 0.3vw; /* 宽度 */
    background-color: rgb(123, 255, 0); /* 背景色 */
  }

  /* 滚动条轨道 */
  ::-webkit-scrollbar-track {
    background: #1e2430; /* 轨道颜色 */
    border-radius: 0; /* 轨道圆角 */
  }

  /* 滚动条的滑块 */
  ::-webkit-scrollbar-thumb {
    background-color: #2926c3; /* 滑块颜色 */
    border-radius: 2px; /* 滑块圆角 */
    border: 0.8vw solid #535f79; /* 滑块边框 */
  }

  /* 滑块在悬停或者点击时的样式 */
  ::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8; /* 悬停时滑块颜色 */
  }
</style>
